<template>
  <div>
    <div class="margin-container-list">
      <div class="top-operate">
        <div>
          <el-select v-model="textCol">
            <el-option label="订单号" value="orderNo"></el-option>
            <el-option label="平台订单号" value="externalOrderNo"></el-option>
            <el-option label="买家姓名" value="customerNickname"></el-option>
            <el-option label="买家手机号" value="customerPhone"></el-option>
          </el-select>
          <el-input v-model="textValue" placeholder="请输入内容" class="width-200"></el-input>
          <el-select v-model="defaultQuery.externalPlatformType" placeholder="平台类型" @change="doChangePlatformType" clearable class="pad-l-10 width-140">
            <el-option v-for="(val, key) in dict.platformType" :key="key" :label="val" :value="key"></el-option>
          </el-select>
          <el-select class="pad-l-10 width-200" v-model="defaultQuery.externalShopId" clearable placeholder="店铺">
            <el-option v-for="(item, index) in shopList" :key="index" :label="item.shopName" :value="item.shopId"></el-option>
          </el-select>
          <el-date-picker v-model="timeValue"
            class="mar-l-10"
            type="daterange"
            range-separator="至"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            start-placeholder="生成日期"
            end-placeholder="生成日期">
          </el-date-picker>
          <el-button-group class="mar-l-10">
            <el-button type="primary" @click="doSearch">查询</el-button>
            <el-button @click="doResetSearch">重置</el-button>
          </el-button-group>
        </div>
        <div class="pad-t-10 btn-search">
          <el-button @click="doBatchPay" type="primary">批量支付</el-button>
        </div>
      </div>
      <!-- 内容列表 -->
      <div class="table-container">
        <el-table :data="dataList" @selection-change="handleSelectionChange" v-loading="listLoading" element-loading-text="加载中">
          <el-table-column width="50px" type="selection"></el-table-column>
          <el-table-column min-width="280px" label="订单号" fixed="left">
            <template slot-scope="scope">
              <div>{{scope.row.orderNo}}</div>
              <div v-if="scope.row.externalPlatformType">
                {{ dict.platformType[scope.row.externalPlatformType] }}：{{scope.row.externalOrderNo}}
              </div>
            </template>
          </el-table-column>
          <el-table-column width="150px" label="买家" align="center">
            <template slot-scope="scope">
              <div>{{scope.row.customerNickname||''}}</div>
              <div style="font-size: 10px;">{{scope.row.customerPhone||''}}</div>
            </template>
          </el-table-column>
          <el-table-column width="150px" label="店铺" align="center">
            <template slot-scope="scope">
              <div>{{ dict.platformType[scope.row.externalPlatformType] }}</div>
              <div>{{ scope.row.shopName }}</div>
            </template>
          </el-table-column>
          <el-table-column width="150px" label="商品数量" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.goodsNum }}</span>
            </template>
          </el-table-column>
          <el-table-column width="150px" label="待付金额">
            <template slot-scope="scope">
                <div>运费：{{ scope.row.orderGoodsFreightToThird }}</div>
                <div>商品：{{ scope.row.orderGoodsPriceToThird }}</div>
                <div>合计：{{ scope.row.orderPriceToThird }}</div>
            </template>
          </el-table-column>
          <el-table-column width="150px" label="零售金额">
            <template slot-scope="scope">
                <div>运费：{{scope.row.freight}}</div>
                <div>商品：{{((scope.row.actualPrice||0)-(scope.row.freight||0)).toFixed(2)}}</div>
                <div>合计：{{scope.row.actualPrice}}</div>
            </template>
          </el-table-column>
          <el-table-column width="160px" label="生成时间" prop="createTime" align="center">
          </el-table-column>
          <el-table-column width="240px" label="操作" align="right" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" size="medium" @click="doLinkDetail(scope.row)">查看详情</el-button>
              <el-button type="text" size="medium" @click="doOpenPay(scope.row)">支付</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 列表分页 -->
      <div class="pagination">
        <el-pagination background 
          @size-change="handleSizeChange" 
          @current-change="handleCurrentChange"
          :current-page="searchListQuery.currentPage"
          :page-sizes="[10, 20, 50, 100]" 
          :page-size="searchListQuery.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>

    <!-- 支付dialog -->
    <el-dialog title="支付中心" :visible.sync="orderPayVisible" width="700px" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false">
      <order-pay :showFlag="orderPayVisible" :payOrderIds="payOrderIds" @doClose="doCloseOrderPay"></order-pay>
    </el-dialog>

  </div>
</template>

<script>
  import orderPay from '@/views/goods/order/components/order-pay'
  import { pageProjectOrder } from '@/api/goods/order'
  import { checkThirdOrder } from '@/api/goods/thirdOrder'
  import { listThirdShop } from '@/api/user/third-shop'
  import { getDictByGroupName } from '@/api/common/common'

  export default {
    components: { orderPay },
    data() {
      return {
        // 文本model
        textCol: 'orderNo',
        textValue: '',
        // 时间model
        timeValue: [],
        // 默认条件
        defaultQuery: {
          currentPage: 1,
          size: 10,
          enterpriseId: '',
          orderStatus: -10,
          orderType: 34,
          externalPlatformType: '',
          externalShopId: ''
        },
        // 查询条件
        searchListQuery: {},
        // 数据字典
        dict: {
          platformType: {}
        },
        // 店铺集合
        shopList: [],
        // 支付订单id集合
        payOrderIds: [],
        // 支付visible
        orderPayVisible: false,
        listLoading: false,
        total: 0,
        dataList: [],
        multipleSelection: []
      }
    },
    // 初始化页面
    created() {
      Object.assign(this.searchListQuery, this.defaultQuery)
      getDictByGroupName('ThirdOrderDTO').then(response => {
        this.dict = response.data
      })
      this.initList()
    },
    methods: {
      // 初始化
      initList() {
        this.listLoading = true
        const size = this.searchListQuery.size
        const currentPage = this.searchListQuery.currentPage
        this.searchListQuery = { ... this.defaultQuery }
        this.searchListQuery.size = size
        this.searchListQuery.currentPage = currentPage
        this.searchListQuery.dateColumn = 'createTime'
        this.searchListQuery.startDate = (this.timeValue && this.timeValue.length > 0) ? this.timeValue[0] : ''
        this.searchListQuery.endDate = (this.timeValue && this.timeValue.length > 1) ? this.timeValue[1] : ''
        this.searchListQuery[this.textCol] = this.textValue
        this.searchListQuery.enterpriseId = this.getEnterpriseId()
        pageProjectOrder(this.searchListQuery).then(response => {
          if (response.isError) return
          this.total = response.data.total
          this.dataList = response.data.records
          this.listLoading = false
        })
      },
      // 查询事件
      doSearch() {
        this.searchListQuery.currentPage = 1
        this.initList()
      },
      // 重置事件
      doResetSearch() {
        const originData = this.$options.data()
        this.textCol = originData.textCol
        this.textValue = originData.textValue
        this.timeValue = originData.timeValue
        this.defaultQuery = originData.defaultQuery
        this.doSearch()
      },
      // 条件部 平台类型切换事件
      doChangePlatformType() {
        this.defaultQuery.externalShopId = ''
        const params = {
          enterpriseId: this.getEnterpriseId(),
          memberId: this.getMemberId(),
          platformType: this.defaultQuery.externalPlatformType
        }
        listThirdShop(params).then(response => {
          if (response.isError) return
          this.shopList = response.data
        })
      },
      // 查看详情事件
      doLinkDetail(row) {
        // this.$router.push({ path: '/order/order/detail/index', query: { orderId: row.orderId }})
        const routeData = this.$router.resolve({
          path: '/order/order/detail/index',
          query: { orderId: row.orderId }
        })
        window.open(routeData.href, '_blank')
      },
      // 批量支付事件
      doBatchPay() {
        if (this.multipleSelection.length === 0) {
          this.$message.error('请选择要支付的订单')
          return
        }
        this.checkOrder(this.multipleSelection)
      },
      // 打开支付dialog事件
      doOpenPay(row) {
        this.checkOrder([row])
      },
      // 校验订单状态
      checkOrder(list) {
        const externalOrderNos = list.map(item => item.thirdOrder.externalOrderNo)
        this.listLoading = true
        checkThirdOrder({ externalOrderNos: externalOrderNos.join(',') }).then(response => {
          this.listLoading = false
          if (response.isError || response.code !== 101) {
            this.initList()
            return
          }
          this.payOrderIds = list.map(item => item.orderId)
          this.orderPayVisible = true
        })
      },
      // 关闭支付事件
      doCloseOrderPay(refreshFlag) {
        this.orderPayVisible = false
        if (refreshFlag) {
          this.$emit('updateOrderStat')
          this.initList()
        }
      },
      // 勾选事件
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.initList()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.initList()
      }
    }
  }
</script>

<style lang="less" scoped>

</style>
